<template>
  <div id="app">
    <!-- 组件重载原理：让组件的key属性发生变化 -->
    <Tabbar :key="topbarKeyVal"></Tabbar>
    <Header></Header>
    <router-view @fn="reloadTopBar" />
    <Footer></Footer>
    <!-- -->
    <Login v-show="isShowLoginModal"></Login>
    <!-- 组件的过渡  需要加transition标签  name自定义 -->
    <transition name="fade">
      <Toast v-show="toShowtoast"></Toast>
    </transition>
  </div>
</template>
<script>
import Tabbar from "@/components/Tabbar";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Login from "@/components/Login";
import Toast from "@/components/Toast";

import { mapState } from "vuex";
export default {
  data() {
    return {
      topbarKeyVal: 1,
    }
  },
  methods:{
    reloadTopBar(){
      this.topbarKeyVal++
    }
  },
  watch: {
    "$route.path": {
      handler(newVal, ordVal) {
        // 两个值不相等说明切换了登录状态，就可以让topbarKeyVal发生变化，即组件重载了
        if(newVal!==ordVal){
          this.topbarKeyVal++
        }
      },
    },
  },
  components: {
    Tabbar,
    Header,
    Footer,
    Login,
    Toast,
  },
  computed: {
    ...mapState({
      isShowLoginModal: (state) => state.ShowLoginModal.isShowLoginModal,
      toShowtoast: (state) => state.ShowToast.toShowtoast,
    }),
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
// // 进场时的初始状态
// .fade-enter,.fade-leave-to{
//   opacity: 0;
// }
// // 进场时的过渡状态
// .fade-enter-active,.fade-leave-active{
//   // transition：过渡属性  过渡时间  匀速
//   transition: all .5s linear;
// }
// // 进场时的结束状态
// .fade-enter-to,.fade-leave{
//   opacity: 1;
// }

/* 进场时候的初始状态, 离场的结束状态 */
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
/* 定义过渡属性 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s linear;
}
/* 进场时候的结束状态 == 离场的初始状态 */
.fade-enter-to,
.fade-leave {
  opacity: 1;
}
</style>
